<template>
    <div>
        <div class="compBox">
            <div class="imageBox">
                <img :src="compImage(complain)"/>
            </div>
            <div class="compDesc">
                <span class="itemname">{{ complain.comp_content }}</span><br/>
                <span class="itemdesc">{{ complain.comp_dept }}</span>
            </div>
        </div>
        <yd-timeline class="listBox">
                <yd-timeline-item>
                    <h2>{{ complain.comp_desc }}</h2>
                    <p>{{ complain.comp_date }}</p>
                </yd-timeline-item>
                <yd-timeline-item v-for="item in _.sortBy(compReplies, 'reply_date')" :key="item.reply_id">
                    <div class="main">
                        <img class="avatar" :src="item.user_image" />
                        <div class="text">
                            <span class="name">{{item.user_name}}</span>
                            {{ item.content }}
                        </div>
                        <p>{{item.reply_date}}</p>
                    </div>
                </yd-timeline-item>
                <yd-timeline-item v-if="!complain.comp_finish" class="yd-timeline-process">
                    <yd-cell-group title="回复">
                        <yd-cell-item>
                            <span slot="left" class="itemname">问题解决了？</span>
                            <yd-switch v-model="compSolve" slot="right"></yd-switch>
                        </yd-cell-item>
                        <yd-cell-item>
                            <yd-textarea v-model="compContent" slot="right" placeholder="请输入您的答复" maxlength="100"></yd-textarea>
                        </yd-cell-item>
                        <!--yd-cell-item v-else>
                            <yd-rate slot="right" v-if="compSolve" v-model="compRate"></yd-rate>
                        </yd-cell-item-->
                        <yd-cell-item>
                            <yd-button slot="right" :type="compContent ? 'primary' : 'disabled'" @click.native="submitReply">确定</yd-button>
                        </yd-cell-item>
                    </yd-cell-group>
                </yd-timeline-item>
                <yd-timeline-item v-else class="yd-timeline-finish">
                    <yd-cell-group title="处理结果">
                        <yd-cell-item>
                            <span slot="left" class="itemname">结束时间</span>
                            <span slot="right">{{ complain.comp_finish }}</span>
                        </yd-cell-item>
                        <!--yd-cell-item>
                            <span slot="left" class="itemname">评价</span>
                            <yd-rate slot="right" :value="complain.comp_rate" :readonly="true"></yd-rate>
                        </yd-cell-item-->
                    </yd-cell-group>
                </yd-timeline-item>
        </yd-timeline>
    </div>
</template>

<script>
module.exports = {
    props: {
        complain: {type: Object, required: true}
    },
    data () {
        return {
            compReplies: {},
            compSolve: false,
            compRate: 5,
            compContent: ''
        }
    },
    watch: {
        complain () {
            this.compReplies = this.complain.replies
        }
    },
    methods: {
        compImage (item) {
            if(item && item.image_list && item.image_list[0]) {
                return item.image_list[0].url
            } else {
                return item.comp_finish ? 'assets/img/default/complaints_ok.jpg' : 'assets/img/default/complaints.jpg'
            }
        },
        submitReply () {
            this.$store.dispatch('replyComplaints',
                {id: this.complain.comp_id, content: this.compContent, solved: this.compSolve ? "1":"0", resolve: (data) => {
                    this.compContent = ''
                    this.compReplies = data[0].replies
                    this.$router.push({name: '投诉'})
                }})
        }
    }
}
</script>

<style scoped>
.compBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.6rem;
}
.imageBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.imageBox img {
    height: 1rem;
    border-radius: .1rem;
}
.compDesc {
    padding-top: .3rem;
}

    .avatar {
        float: left;
        margin: 0 .2rem 0 0;
        border-radius: .1rem;
        width: .8rem;
        height: .8rem;
    }
    .text {
        display: inline-block;
        position: relative;
        padding: 0 .1rem;
        margin-top: .4rem;
        max-width: calc(100% - 2rem);
        min-height: .3rem;
        line-height: 2.5;
        font-size: .28rem;
        text-align: left;
        word-break: break-word;
        background-color: #fff;
        border-radius: .1rem;
        box-shadow: 0px 0px 0px #888888;
    }
    .text:before {
            content: " ";
            position: absolute;
            top: .1rem;
            right: 100%;
            border: .1rem solid transparent;
            border-right-color: #fff;
        }
.text .name {
    position: absolute;
    line-height: .1rem;
    font-size: .3rem;
    color: #0A27D2;
    top: -.3rem;
    left: 0rem;
    min-width: 6rem;
}
.text .tag {
    display: inline-block;
    padding: 0 .18rem;
    font-size: .12rem;
    color: #fff;
    border-radius: .1rem;
    background-color: #dcdcdc;
    height: .25rem;
    line-height: .25rem;
    margin-left: .3rem;
}
.itemname {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.itemdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
.mainDesc {
    min-height: 1rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    font-size: .38rem;
    border-bottom: 1px solid #eee;
}
.yd-timeline-finish > em {
            top: 3px;
            background-color: #30F230;
            width: 10px;
            height: 10px;
            left: -21px;
          }
.yd-timeline-finish:before {
            content: '';
            width: 16px;
            height: 16px;
            position: absolute;
            z-index: 0;
            top: 0;
            left: -24px;
            background-color: #BFFBBF;
            border-radius: 99px;
          }
.yd-timeline-process > em {
            top: 3px;
            background-color: #3030F2;
            width: 10px;
            height: 10px;
            left: -21px;
          }
.yd-timeline-process:before {
            content: '';
            width: 16px;
            height: 16px;
            position: absolute;
            z-index: 0;
            top: 0;
            left: -24px;
            background-color: #BFBFFB;
            border-radius: 99px;
          }
</style>
